<template>
	<view>
		<header>
			<div class="hi">商品分类</div>
			<div class="search">
				<img class="search__icon" src="../../static/搜索.svg" alt="" />
				<input class="search__input" v-model="serachValue" type="text" placeholder="搜素商品" />
				<u-button type="primary" @click="btnGoods" style="width: 60px; margin-left: 120px; border-radius: 10px;"
					text="搜索"></u-button>
			</div>
		</header>

		<div class="grid">
			<nav class="menu collapsible">
				<ul>
					<li v-for="(goodsItem,goodsIndex) in goods" @click="selectItem(goodsItem)">
						{{goodsItem.classifyName}}
					</li>
				</ul>
			</nav>
			<div class="main">
				<div>
					<img class="main-image" src="../../static/banner.jpg" alt="热门好物" />
					<view>
						<u-grid :border="false" col='3'>
							<u-grid-item v-for="(baseListItem, baseListIndex) in baseList" :key="baseListIndex">
								<!-- 使用image组件来显示图片 -->
								<image class="good-image" @click="clickRoute(baseListItem)"
									:src="baseListItem.classifyTwoImg" mode="aspectFill" />
								<text class="grid-text">{{baseListItem.classifyTwoName}}</text>
							</u-grid-item>
						</u-grid>
						<u-toast ref="uToast" />
					</view>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	import {
		findSelectClass,
		findSelectClassTwo,
		getApiGet
	} from '../../api/classify.js';
	export default {
		data() {
			return {
				serachValue: '',
				baseList: [{
					classifyTwoName: '商品1',
					classifyTwoImg: '../../static/12.jpg'
				}],
				goods: [{
					id: 1,
					classifyName: '新品上市',
				}]
			};
		},
		created() {
			this.notoken();
		},
		methods: {
			// 查询
			btnGoods() {
				if (this.serachValue == null || this.serachValue == '') {
					console.log(this.serachValue, "未输入")
				} else {
					this.$cookies.set("goodsName", this.serachValue)
					// console.log(this.serachValue)
				}
			},
			// 查询一级分类
			notoken(id) {
				findSelectClass({
					id: 3
				}).then(request => {
					this.goods = request.data
				})
				this.selectItem();
			},
			// 查询二级分类
			selectItem(item) {
				if (item != null) {
					console.log(item.id)
					if (item != null) {
						this.selectedItem = item.id;
					} else {
						this.selectedItem = 1;
					}
					findSelectClassTwo({
						classifyId: this.selectedItem
					}).then(resquest => {
						this.baseList = resquest.data
						console.log(this.baseList)
					})
				}else{
					this.selectedItem = 1;
					findSelectClassTwo({
						classifyId: this.selectedItem
					}).then(resquest => {
						this.baseList = resquest.data
						console.log(this.baseList)
					})
				}

			},
			// 商品查询
			selectProduct() {

			},
			// 默认查询
			click(name) {
				this.$refs.uToast.success(`点击了第${name}个`)
			},
			// 查询商品
			clickRoute(item) {
				console.log(item.id)
				this.$cookies.set("classifyId", item.id)
				uni.navigateTo({
					url: '/pages/profile/goodsList'
				})
			}
		}
	};
</script>

<style>
	/* 全局 */
	view {
		--color-secondary: #2ac2d2;
	}

	/* 页头 */
	.hi {
		color: white;
		margin: 0 0 20px 10px;
		padding-top: 10px;
	}

	.search {
		border-radius: 20px;
		display: flex;
		background-color: #fff;
		margin-left: 10px;
	}

	.search__icon {
		width: 20px;
		margin: 5px 7px;
	}

	header {
		background-color: var(--color-secondary);
		height: 20vh;
	}

	.search__input {
		margin: 5px 7px;
		height: 30px;
	}

	/* 导航 */
	ul {
		list-style-type: none;
		padding-left: 10px;
	}

	li {
		margin-top: 20px;
		font-size: 80%;
	}

	/* 主视图 */
	.grid {
		display: grid;
		grid-template-columns: 20% 80%;
		column-gap: 8px;
	}

	.main-image {
		margin: 4px 0 20px 0;
		width: 98%;
	}

	.good-image {
		width: 80px;
		height: 80px;
	}

	.goods {
		display: grid;
		grid-template-columns: repeat(6, 33%);
		grid-template-rows: repeat(4, 20%);
	}

	.active {
		color: lightpink;
	}
</style>